<template>
  <div class="params">
    <mbx />
    <el-card>
      <!-- 警示框 -->
      <el-alert
        title="注意：只允许为第三级分类设置相关参数！"
        type="warning"
        show-icon
      >
      </el-alert>
      <div class="block">
        <span class="demonstration">选择商品分类：</span>
        <el-cascader
          v-model="value"
          :options="options"
          :props="{ label: 'cat_name', value: 'cat_id' }"
        ></el-cascader>
      </div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item index="1" @click="index = 1" open>动态参数</el-menu-item>
        <el-menu-item index="2" @click="index = 2">静态属性</el-menu-item>
      </el-menu>

      <div>
        <el-button
          type="primary"
          :disabled="value.length != 0 ? false : true"
          size="small"
          class="button"
          v-show="index == 1"
          @click="MainButton()"
          >主要按钮</el-button
        >
        <el-button
          type="primary"
          size="small"
          class="button"
          :disabled="value.length != 0 ? false : true"
          v-show="index == 2"
          @click="AdditiveAttribute()"
          >添加属性</el-button
        >
        <el-table :data="tableData" style="width: 100%" border>
          <el-table-column type="expand">
            <template slot-scope="props"> </template>
          </el-table-column>
          <el-table-column label="#" prop="id" width="50%"> </el-table-column>
          <el-table-column
            :label="index == 1 ? '参数名称' : '属性名称'"
            prop="id"
          >
          </el-table-column>
          <el-table-column label="操作" prop="name"> </el-table-column>
        </el-table>
      </div>
      <Params :forms="forms" :form="form"></Params>
    </el-card>
  </div>
</template>

<script>
import mbx from "@/components/mbx.vue";
import { cateList } from "@/utils/Api(goods)/Goods";
import Params from "../ParamsDialog";
export default {
  components: { mbx, Params },
  data() {
    return {
      index: 1,
      activeIndex: "1",
      options: [],
      value: [],
      tableData: [],
      dialogFormVisible: false,
      forms: {
        title: "",
        type: "",
        nai:'',
        flag: false,
      },
      form: {
        name: "",
      },
    };
  },
  methods: {
    async addrights() {
      let res = await cateList({ type: 3 });
      this.options = res.data;
    },
    MainButton() {
      this.forms = {
        title: "添加动态参数",
        type: "add",
        flag: true,
        nai:'动态参数'
      };
    },
    AdditiveAttribute(){
      this.forms = {
        title: "添加静态参数",
        type: "edit",
        flag: true,
        nai:'静态参数'
      };
    }
  },
  mounted() {
    this.addrights();
  },
};
</script>

<style lang="scss" scope>
.block {
  margin-top: 20px;
}
.button {
  margin: 10px;
}
</style>
